<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <el-icon style="margin-right: 5px"><Place /></el-icon>
      <span> {{ placeholder }}</span>
    </div>
    <div v-else-if="mode === 'PC' && !readonly">
      <el-cascader v-model="_valuePc" style="width: 100%" clearable separator="-" :options="treeData"></el-cascader>
    </div>
    <div v-else-if="mode === 'MOBILE' && !readonly">
      <field readonly right-icon="arrow" clickable v-model="_value" :placeholder="placeholder" @click="showPicker = true"/>
      <popup v-model:show="showPicker" position="bottom">
        <v-area title="请选择" v-model="areaObj[_valuePc.length > 0 ? _valuePc[0] : null]"
          :columns-num="level" :area-list="areaList" @cancel="showPicker = false" @confirm="ok"/>
      </popup>
    </div>
    <div v-else>
      {{ _value }}
    </div>
  </div>
</template>

<script>
import { Place } from '@element-plus/icons-vue'
import { areaList } from '@vant/area-data'
import { Field, Area, Popup } from 'vant'
import componentMinxins from '/@/views/setting/workflow/components/ComponentMinxins'
import { computed, onMounted, reactive, toRefs } from 'vue'
import { isNotEmpty } from '/@/utils/utils'
var VArea = Area

export default {
    name: 'Provinces',
    mixins: [componentMinxins],
    components: {  
        Place,
        Field, 
        VArea, 
        Popup
    },
    props: {
        modelValue: {
            type: String,
            default: null,
        },
        placeholder: {
            type: String,
            default: '请选择行政区划',
        },
        level: {
            type: Number,
            default: 3,
        },
    },
    setup(props, context) {
        const { modelValue, mode, level } = toRefs(props)
        const state = reactive({
            treeData: [],
            areaObj: {},
            showPicker: false,
            areaList,
        })
        const _valuePc = computed({
            get: () => {
                if (isNotEmpty(modelValue.value)) {
                    return modelValue.value.split('-')
                }
                return []
            },
            set: val => {
                context.emit('update:modelValue', String(val).replaceAll(',', '-'))
            }
        })
        const loadTreeData = async () => {
            const _this = state
            const province_list = Object.assign({}, areaList.province_list)
            const city_list = Object.assign({}, areaList.city_list)
            const county_list = Object.assign({}, areaList.county_list)
            _this.treeData.length = 0
            for (const k in province_list) {
                let province = {
                    label: province_list[k],
                    value: province_list[k],
                    children: [],
                }
                if (level.value >= 2) {
                    for (const k2 in city_list) {
                        let v = k2 - k
                        if (v > 0 && v < 10000) {
                            let city = {
                                label: city_list[k2],
                                value: city_list[k2],
                                children: [],
                            }
                            if (level.value > 2) {
                                for (const k3 in county_list) {
                                    let v2 = k3 - k2
                                    if (v2 > 0 && v2 < 100) {
                                        let county = {
                                            label: county_list[k3],
                                            value: county_list[k3],
                                        }
                                        delete county_list[k3]
                                        city.children.push(county)
                                    }
                                }
                            } else {
                                city.children = undefined
                            }
                            delete city_list[k2]
                            province.children.push(city)
                        }
                    }
                } else {
                    province.children = undefined
                }
                delete province_list[k]
                _this.treeData.push(province)
            }
            console.log('加载数据')
        }
        const loadAreaMap = async () => {
            for (const k in areaList.province_list) {
                state.areaObj[areaList.province_list[k]] = k
            }
            for (const k in areaList.city_list) {
                state.areaObj[areaList.city_list[k]] = k
            }
        }
        const ok = (val) => {
            _value.value = String(val.selectedOptions.map((v) => v.text)).replaceAll(',', '-')
            state.showPicker = false
        }
        onMounted(() => {
            if (mode.value === 'PC') {
                loadTreeData()
            } else if (mode.value === 'MOBILE') {
                loadAreaMap()
            }
        })
        return {
            ...toRefs(state),
            _valuePc,
            ok
        }
    }
}
</script>

<style>

</style>